<template>
  <div class="sceneCard">
    <div @click="algorithmList(als)">
      <el-row class="cardImg pointer">
        <el-col :offset="8" :span="8">
          <img
            :src="
              require('@/assets/images/AlgorithmMode/' +
                (als.showImage ?? 'defalt_img') +
                '.png')
            "
          />
        </el-col>
      </el-row>
      <el-row class="cardInfo">
        <!-- 标题 -->
        <el-col :span="24" class="textOverflow title col">
          {{ als.alsName }}
        </el-col>
        <!-- 类型 -->
        <el-col :span="24" class="textOverflow col">
          <el-tag
            class="tag"
            type="info"
            v-for="c in als.classes"
            :key="c.classId"
            >{{ c.className }}</el-tag
          >
        </el-col>
      </el-row>
    </div>
    <!-- 浏览、评论、点赞 -->
    <CardAction :als="als" class="cardInfo" />
    <!-- 弹框 -->
    <el-dialog
      width="70%"
      v-model="dialogVisible"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <template #header>
        <div class="title-icon">
          <div class="title-si">{{ title }}</div>
          <div>
            <el-button
              type="primary"
              plain
              v-if="operType != 0"
              @click="algorithmClick(operType)"
              >{{ btnTextMap[operType] }}</el-button
            >
            <el-button type="primary" plain @click="dialogVisible = false"
              >关闭</el-button
            >
          </div>
        </div>
      </template>
      <div class="parameter">
        <h3>一、算法介绍</h3>
        <p class="conter">{{ algorithm.alsIntro }}</p>
        <h3>二、适用场景</h3>
        <p class="conter">{{ algorithm.alsScene }}</p>
        <h3>三、数据源字段及参数说明</h3>
        <p class="conter">{{ algorithm.alsParam }}</p>
        <AlgorithmComment :alsId="alsId" />
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import CardAction from "@/views/algorithm/storeView/CardAction";
import {
  algorithmData,
  addAlsViewCounts,
  algorithmOperation,
} from "@/services/algorithm";
import { ElMessage, ElMessageBox } from "element-plus"; //状态提示框
import { onMounted, toRefs, ref, reactive, provide, inject, watch } from "vue";
import AlgorithmComment from "@/views/algorithm/detailsView/AlgorithmComment";

const dialogVisible = ref(false); //弹窗
const loading = ref(false); //状态
const title = ref(""); //标题
const algorithm = ref({}); //渲染数据
const alsId = ref(""); //渲染数据
const btnTextMap = ref({
  1: "算法删除",
  2: "算法卸载",
  3: "取消算法共享",
  4: "下载至算法库",
}); //算法按钮标识
const operType = ref("");
const { als, store } = defineProps({
  als: Object,
  store: Number, //接受0或1
}); //接受父组件参数

// console.log(als);
provide("als", als);
const queryAlgorithmInfos = inject("queryAlgorithmInfos", () => {});

const algorithmList = (scene) => {
  //点击调用
  dialogVisible.value = true; //弹窗显示
  title.value = scene.alsName; //标题赋值
  alsId.value = scene.alsId; //评论alsId
  algorithmPopup(scene.alsId); //点击一个调用一个查看当前信息
  addAlsViewCount(); //浏览加1
};
provide("dialogVisible", dialogVisible); //传递给AlgorithmComment弹框状态
//调用
const algorithmPopup = async (id) => {
  const respData = await algorithmData({ algorithmID: id, pageType: store });
  loading.value = false; //加载状态
  if (respData?.respCode == 200) {
    algorithm.value = respData.respData;
    operType.value = respData.respData.operType;
  }
  loading.value = true; //加载状态
};
//点击调用算法标识
const algorithmClick = async (operType) => {
  // console.log(operType);
  ElMessageBox.confirm("是否进行" + btnTextMap.value[operType], "算法库", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      const respData = await algorithmOperation({
        alsID: als.alsId,
        operType: operType,
      });
      if (respData.respCode == 200) {
        ElMessage.success(respData.respMessage);
        dialogVisible.value = false;
        queryAlgorithmInfos();
      } else {
        ElMessage.error(respData.respMessage);
      }
    })
    .catch(() => {});
};

const addAlsViewCount = async () => {
  // 浏览
  let respData = await addAlsViewCounts({ alsID: als.alsId });
  if (respData?.respCode != 200) {
    return ElMessage({ message: respData?.respMessage, type: "error" });
  }
  als.looked++; //评论加加
};

//调用
onMounted(() => {});
</script>

<style lang="scss" scoped>
@mixin translation {
  transition: box-shadow 0.6s ease 0s;
}
.sceneCard {
  width: 100%;
  padding: 5px;
  border-radius: 12px;
  border: solid 1px #dedede;
  position: relative;
  @include translation;
  &:hover {
    box-shadow: 0px 0px 12px #cdcdcd;
    .deleteIcon {
      display: block;
      opacity: 1;
      z-index: 1;
    }
  }
  .cardInfo {
    padding: 0 15px;
    .title {
      text-align: center;
    }
    .col {
      padding: 5px 0;
      height: 35px;
    }
  }
  .deleteIcon {
    z-index: 2;
    opacity: 0;
    position: absolute;
    right: 10px;
    top: 10px;
    width: 20px;
    transition: opacity 0.6s ease 0s;
  }
  .minWidth {
    min-width: 60px;
  }
  .displayFlex {
    display: flex;
  }
  img {
    width: 100px;
  }
  .tag {
    margin-right: 5px;
  }
  .textOverflow {
    overflow: hidden; // 超出内容隐藏
    text-overflow: ellipsis; // 用省略号来代表被隐藏掉的文本
    white-space: nowrap; // 强制文本在一行显示
  }
  .pointer {
    cursor: pointer;
    img {
      width: 100px;
      height: 100px;
    }
  }
  .parameter {
    width: 100%;
    height: 560px;
    overflow: auto;
  }
  .conter {
    width: 100%;
    text-indent: 2em;
  }
  .title-icon {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title-si {
      font-size: 24px;
    }
  }
}
</style>